<template>
  <section>
    <el-row style="float: right">
      <el-button size="mini" type="primary" @click="createPeriodBtn">新建课时</el-button>
      <!--<el-button size="mini" type="text" @click="loadPeriodBtn" v-if="course">导入课时</el-button>-->
    </el-row>
    <el-table :data="periodList">
      <el-table-column type="index" label="序号"/>
      <el-table-column label="课时名称" prop="title"/>
      <el-table-column label="讲师" prop="lecturer"/>
      <el-table-column label="地点" prop="address"/>
      <el-table-column label="开课时间" prop="start" :formatter="timeFormatter"/>
      <el-table-column label="结课时间" prop="end" :formatter="timeFormatter"/>
      <el-table-column label="签到">
        <template slot-scope="scope">
          <el-button size="mini" type="success" @click="showEditQrCodeDialogBtn(scope.row)" v-if="scope.row.data.qrCodeId">更新二维码</el-button>
          <el-button size="mini" type="text" v-if="scope.row.data.qrCodeId" @click="showQrCodeDialogBtn(scope.row)">打开二维码图片</el-button>
          <el-button size="mini" type="text" @click="showAddQrCodeDialogBtn(scope.row)" v-else>创建签到</el-button>
        </template>
      </el-table-column>
      <el-table-column label="课程简介" prop="description">
        <template slot-scope="scope">
          <el-popover placement="top-start" title="" width="200" trigger="click" :content="scope.row.description">
            <el-button slot="reference" size="mini" type="text">预览</el-button>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="editBtn(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click='delPeriod(scope)'>删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="editPeriodDialog" :title="currPeriod.id?'编辑':'新建'" v-if="editPeriodDialog">
      <new-period :currPeriod="currPeriod" v-on:createPeriod="createPeriod" v-on:updatePeriod="updatePeriod"></new-period>
    </el-dialog>
    <el-dialog :visible.sync="qrCodeDialog" title="生成二维码" v-if="qrCodeDialog">
      <new-code :currCode="currCode" v-on:confirm="confirmQrCodeBtn" ></new-code>
    </el-dialog>
    <el-dialog :visible.sync="showQrCodeDialog" :title="currPeriod.title+' - 签 到'" v-if="showQrCodeDialog">
      <el-row style="text-align:center">
        <img :src="imgUrl"/>
      </el-row>
      <el-row style="text-align:center">
        <el-button size="mini" @click="getQrCodeImg(imgUrl)" type="primary">刷新</el-button>
      </el-row>
    </el-dialog>
  </section>
</template>

<script>
  import newCode from '@/components/qrCode/qrCodeManagement/newCode'
  import showQrCode from '@/components/courseManagement/qrCodeSign'
  import periodLearnerInfo from './periodLearnerInfo'
  import newPeriod from './newPeriod'
  import dateFormater from '@/common/date-formater'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import errHandler from '@/assets/errHandler.js'
  import Vue from 'vue'//后续添加属性，需要vue联动
  export default {
    name: "periodList",
    components: {newPeriod,periodLearnerInfo,newCode,showQrCode},
    props:['course'],
    data() {
      return {
        editPeriodDialog:false,
        periodList:null,
        currPeriod:{},
        qrCodeDialog:false,
        showQrCodeDialog:false,
        redirect:'/qrCodeSign',
        currCode:null,
        customerIds:null,
        imgUrl:null
      }
    },
    created(){
      if(this.course){
        this.periodList=this.course.periods
        return
      }
    },
    computed: {
      ...mapGetters(['department']),
    },
    watch:{},
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      timeFormatter(a,b,c,d){
        return dateFormater.dateTime(c)
      },
      showQrCodeDialogBtn(row){
        console.log(row)
        this.currPeriod=row
        let id=row.data.qrCodeId
        let encrypt=false
        let serverAddress="https://gateway.crzycn.com"
        let api="/core/qrCode/getImage"
        let url=serverAddress+ api + '?'+'id='+id+'&'+'encrypt='+ encrypt +'&' +'token='+ this.$store.getters.token +'&'+'clientid='+this.$store.getters.clientId
        this.getQrCodeImg(url)
      },
      getQrCodeImg(url){
        this.imgUrl=url
        this.showQrCodeDialog=true
      },
      showAddQrCodeDialogBtn(row){//显示编辑二维码的dialog
        this.currPeriod=row
        this.currCode={
          title:this.course.title+'-'+row.title,
          api:'/mall/periodLearnerInfo/signIn',
          data:{type:'period',periodId:this.currPeriod.id}
        }
        this.qrCodeDialog=true
      },
      showEditQrCodeDialogBtn(row){//显示编辑二维码的dialog
        console.log(row)
        this.currPeriod=row
        this.fetch({name:"getQrCode",data:{id:row.data.qrCodeId}})
          .then(res=>{
            console.log('看看能不能获取到',res)
            this.currCode=res
            this.qrCodeDialog=true
          })
          .catch(err=>{
            console.log(err)
            if(err.errMsg === '二维码不存在'){
              this.showAddQrCodeDialogBtn(row)
            }
            errHandler.handle(this,err)
          })
      },
      editBtn(row){
        this.currPeriod=row
        this.editPeriodDialog=true
      },
      delPeriod(scope){
        this.loading=true
        this.$confirm('确认删除？')
          .then(()=> {
            this.fetch({name:"delPeriod",data:{id:scope.row.id}})
              .then(res=>{
                console.log(res)
                this.periodList.splice(scope.$index,1)
              })
              .catch(err=>{
                console.log(err)
                errHandler.handle(this,err)
              })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
            this.loading = false
          })
      },
      createPeriodBtn(){
        this.currPeriod={
          courseId:this.course.id
        }
        this.editPeriodDialog=true
      },
      createPeriod(data){
        data.start=dateFormater.formatDatetime(data.start)
        data.end=dateFormater.formatDatetime(data.end)
        this.fetch({name:"createPeriod",data})
          .then(res=>{
            console.log(res)
            this.periodList=res.periods
            this.editPeriodDialog=false
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      updatePeriod(data){
        console.log(data)
        data.start=dateFormater.formatDatetime(data.start)
        data.end=dateFormater.formatDatetime(data.end)
        this.fetch({name:"updatePeriod",data})
          .then(res=>{
            console.log(res)
            this.editPeriodDialog=false
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      confirmQrCodeBtn(data){
        console.log('课时里创建二维码——————',data)
        if(data.id){
          this.updataQrCode(data)
          //更新
        }else {
          //新建
          this.createQrCode(data)
        }
      },
      createQrCode(data){
        this.fetch({name:"createQrCode",data})
          .then(res=>{
            console.log('创建二维码成功',res)
            //把二维码id存到课时data里
            this.currPeriod.data.qrCodeId=res.id
            this.updatePeriod(this.currPeriod)
            this.qrCodeDialog=false
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      updataQrCode(data){
        this.fetch({name:"updateQrCode",data})
          .then(res=>{
            console.log('更新二维码成功',res)
            this.qrCodeDialog=false
            this.showQrCodeDialogBtn(this.currPeriod)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
    }
  }
</script>

<style scoped>

</style>
